<template>
	<view>
		<!-- 失物招领 -->
		<view class="" v-if="Bjlist[0].type===1 || Bjlist[0].type===2">
			<!-- 开始 寻拾姓名-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">寻拾姓名</text>
				<uni-easyinput v-model="Swname" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写您的姓名或称呼" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 寻拾姓名-->

			<!-- 开始 寻拾物品-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">寻拾物品</text>
				<uni-easyinput v-model="Swgoods" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写你寻拾的物品名" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 寻拾物品-->

			<!-- 开始 简单描述寻拾物品的关键特征或细节描述-->
			<view class="Run_5" style="margin-top: 10rpx;height: 360rpx;">
				<text class="Run_5_1">简单描述寻拾物品的关键特征或细节描述</text>
				<uni-easyinput type="textarea" @input="descInput"
					style="width: 111%;position: absolute;left: 32rpx; top: 120rpx;" autoHeight :trim="true"
					:maxlength="100" styles="styles" v-model="SwText" :inputBorder="false"
					placeholder="填写与物品有关的描述可时间地点何时何地寻拾到该物品,100字">
				</uni-easyinput>
				<text class="abe">{{ start }}/100</text>
			</view>
			<!-- 结束 简单描述寻拾物品的关键特征或细节描述-->

			<!-- 开始 寻拾类型-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">寻拾类型</text>
				<radio-group class="Run_fw_labe2">
					<label class="" style="width:200rpx;transform:scale(0.7);" v-for="(item, index) in items"
						:key="item.value">
						<view @click="radioFawei(item)">
							<radio :value="item.value" :checked="index+1 === Swtype"/>
							<view class="Run_fw_1">{{item.name}}</view>
						</view>
					</label>
				</radio-group>
				</uni-easyinput>
			</view>
			<!-- 结束 寻拾类型-->

			<!-- 开始 联系方式-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">联系方式</text>
				<uni-easyinput v-model="Swphone" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写您的联系方式" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 联系方式-->
			<!-- 开始 可附选图片-->
			<view class="Run_55" style="margin-top: 10rpx;">
				<text class="Run_5_1">可选附图</text>
				<view class="example-body" style="padding: 40px 20px 0px 20px;">
					<uni-file-picker v-model="imageValue" file-mediatype="image" @select="select" limit="3"
						title="最多选择3张图片(物品形状描述图)" auto-upload="true" @delete="delImage"></uni-file-picker>
				</view>
			</view>
			<!-- 结束 可附选图片-->
			<!-- 发布按钮 -->
			<button class="uniBt_but uniBt_but22" type="warn" size="default" @click="ReleaseGo()">确认修改</button>
			<view style="padding-top: 440rpx;">
			</view>
		</view>

		<!-- 二手闲置 -->
		<view class="" v-if="Bjlist[0].type===3">

			<!-- 开始 二手闲置发布内容-->
			<view class="Run_5" style="margin-top: 10rpx;height: 600rpx;">
				<!-- <text class="Run_5_1">填写需要出售闲置的具体描述、转卖愿意、入手渠道等</text> -->
				<uni-easyinput type="textarea" @input="descInput"
					style="width: 111%;position: absolute;left: 32rpx; top: 40rpx;" autoHeight :trim="true"
					:maxlength="100" styles="styles" v-model="XzText" :inputBorder="false"
					placeholder="填写需要出售闲置的具体描述、转卖愿意、入手渠道等,100字">
				</uni-easyinput>
				<text class="abe">{{ start }}/100</text>
				<view class="example-body" style="padding: 40px 20px 0px 20px;padding-top: 240rpx;">
					<uni-file-picker v-model="imageValue" fileMediatype="image" @select="select" limit="3"
						title="最多选择3张图片(物品形状描述图)"></uni-file-picker>
				</view>
				<image class="down23"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E5%8A%A8%E6%80%81%E5%8C%BA%E5%9D%97%E5%85%BC%E8%81%8C%E4%BF%A1%E6%81%AF-Pt_information/%E5%B7%A5%E4%BD%9C%E5%9C%B0%E7%82%B9.png"
					mode=""><text class="maerq1">{{ infaddress }}</text></image>
			</view>
			<!-- 结束 二手闲置发布内容-->

			<!-- 开始 价格 -->
			<view class="Run_5" style="margin-top: 10rpx;">
				<image style="position:absolute;width: 80rpx;height: 80rpx;top: 26rpx;left: 30rpx;"
					src="https://bkimges.oss-cn-beijing.aliyuncs.com/images/%E5%8A%9F%E8%83%BD%E5%8C%BA%E5%8F%91%E5%B8%83-release/%E4%BB%B7%E6%A0%BC.png"
					mode=""></image>
				<text class="Run_5_1" style="left: 60px;font-size: 16px;">价格</text>
				<uni-easyinput v-model="Xzprice" style="width: 85%;position: absolute;left: 180rpx; top: 32rpx;"
					type="number" :placeholderStyle="placeholderStyle" placeholder="您想卖的价格" :inputBorder="false"
					maxlength=8 :styles="styles">
				</uni-easyinput>
			</view>
			<!-- 结束 价格 -->

			<!-- 开始类型 电子类 学习类 生活类  -->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1">闲置分类</text>
				<view class="uni-list" style="position: absolute;color: red;font-weight: bold;font-size: 14px;">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker mode="selector" @change="bindPickerChange_xz" :value="index" :range="array1">
								<view class="uni-input"
									style="width: 670rpx;height: 134rpx;line-height: 134rpx;direction: rtl;padding-right: 25px;">
									{{array1[index1]}}
								</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<!-- 结束 类型 电子类 学习类 生活类  -->
			<!-- 开始 联系方式 手机号-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1" style="top: 24rpx;">联系方式</text>
				<text class="Reaade1" style="top: 66rpx;">(手机)</text>
				<uni-easyinput v-model="Xzphone" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					type="number" :placeholderStyle="placeholderStyle" :maxlength="11" placeholder="请填写您的手机号"
					:inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 联系方式-->

			<!-- 开始 联系方式 微信号-->
			<view class="Run_5" style="margin-top: 10rpx;">
				<text class="Run_5_1" style="top: 24rpx;">联系方式</text>
				<text class="Reaade1" style="top: 66rpx;">(微信)</text>
				<uni-easyinput v-model="Xzwx" style="width: 90%;position: absolute;left: 150rpx; top: 30rpx;"
					:placeholderStyle="placeholderStyle" placeholder="请填写您的微信号" :inputBorder="false">
				</uni-easyinput>
			</view>
			<!-- 结束 联系方式-->
			<!-- 发布按钮 -->
			<button class="uniBt_but uniBt_but222" type="warn" size="default" @click="ReleaseGo()">确认修改</button>
			<view style="padding-top: 440rpx;">

			</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '../../../js_sdk/lib/qqmap-wx-jssdk.min.js'
	import uploadImage from '../../../js_sdk/yushijie-ossutil/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				//编辑的类型
				DoType: 0,
				placeholderStyle: '',
				start: 0, //统计字数
				imageValue: [], //临时存图片对象数据
				Type: 0, //切换的类型
				//我的动态传递过来的数据
				Bjlist: [],
				styles: {},
				items: [{
						value: '1',
						name: '寻物'
					},
					{
						value: '2',
						name: '拾物'
					},
				],
				infaddress: '', //定位信息
				array: ['元/时', '元/天', '元/周', '元/月', '元/年'],
				array1: ['--未分类--', '学习类', '电子类', '生活类', '化妆品', '衣服', '其他'],
				//选择的金额类型
				index: 0,
				//选择的分类
				index1: 0,
				//失物招领所要信息
				Swno: '',
				Swname: '', //寻拾姓名
				Swgoods: '', //寻拾物品
				SwText: '', //寻拾描述
				Swtype: 1, //寻拾类型 1寻物 2拾物
				Swphone: '', //寻物联系方式
				SwImage: [], //图片数组
				//二手闲置
				Xzno: '',
				XzText: '', //闲置发布的内容
				Xzprice: '', //闲置价格
				Xztype: '', //闲置分类
				Xzphone: '', //闲置联系方式手机号
				Xzwx: '', //闲置联系方式微信号
				XzImage: [], //闲置图片集
				fileLists: [{
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'uniapp-logo.png'
				}, {
					url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
					extname: 'png',
					name: 'shuijiao.png'
				}]
			};
		},
		onLoad: function(option) {
			this.Loadsj()
			this.GetLocation()
		},
		methods: {
			Loadsj() {
				const that = this
				uni.getStorage({
					key: 'Bj',
					success: function(res) {
						console.log(res)
						that.Bjlist.push(res.data)
						if (res.data.type === 1 || res.data.type === 2) {
							setTimeout(() => {
								that.Swno = res.data.no
								that.Swname = res.data.userName
								that.Swgoods = res.data.title
								that.SwText = res.data.text
								that.Swtype = res.data.type
								that.Swphone = res.data.phone
								let obj={}
								res.data.lostImg.forEach((item,value,arr)=>{
									obj['name']='aa.txt'
									obj['extname']='png'
									obj['url']=item
									console.log(obj)
									that.imageValue.push(obj)
								})
								that.descInput()
							}, 0)

						}else{
							setTimeout(() => {
								that.Xzno = res.data.no
								that.Xzname = res.data.userName
								that.XzText = res.data.detail
								that.Xzprice = res.data.price
								that.Xztype = res.data.Xztype
								that.index1=that.Xztype
								that.Xzphone = res.data.phone
								that.Xzwx=res.data.userWx
								let obj={}
								res.data.lostImg.forEach((item,value,arr)=>{
									obj['name']='aa.txt'
									obj['extname']='png'
									obj['url']=item
									console.log(obj)
									that.imageValue.push(obj)
								})
								that.descInput()
							},0)
						}
					}
				})
			},
			//获取上传状态
			select(e) {
				console.log('选择文件：', e)
				//this.uploadOss()
				//this.imageValue=[]
			},
			//删除状态
			delImage(e){
				console.log('删除选择文件：', e)
			},
			descInput() {
				if(this.Bjlist[0].type === 1 || this.Bjlist[0].type === 2){
					this.start = this.SwText.length
				}else{
					this.start = this.XzText.length
				}
				
				
			},
			//闲置绑定弹出分类选中
			bindPickerChange_xz: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index1 = e.detail.value
				this.Xztype = this.array1[this.index1]
			},
			//上传图片
			uploadOss() {
				//支持多图上传
				const that = this
				for (var i = 0; i < that.imageValue.length; i++) {
					//显示消息提示框
					uni.showLoading({
						mask: true
					})
					if(that.imageValue[i].image!=undefined){
						uploadImage(that.imageValue[i].image.location, 'UserRunImg/',
							result => {
								if (that.Bjlist[0].type === 1 || that.Bjlist[0].type === 2) {
									that.SwImage.push(result)
								} else if (that.Bjlist[0].type === 3) {
									that.XzImage.push(result)
								}
								console.log(result);
								uni.hideLoading();
								//成功之后，可以将result带去执行其它方法或者赋值
								if (that.imageValue.length === that.SwImage.length) {
									that.ReleaseGo_MY()
								} else if (that.imageValue.length === that.XzImage.length) {
									that.ReleaseGo_MY()
								}
							}, result => {
								//这里写上传失败的代码 
								console.log(JSON.stringify(result));
							})
					}else{
						if (that.Bjlist[0].type === 1 || that.Bjlist[0].type === 2) {
							that.SwImage.push(that.imageValue[i].url)
							
						} else if (that.Bjlist[0].type === 3) {
							that.XzImage.push(that.imageValue[i].url)
						}
						uni.hideLoading();
						//成功之后，可以将result带去执行其它方法或者赋值
						if (that.imageValue.length === that.SwImage.length) {
							that.ReleaseGo_MY()
						} else if (that.imageValue.length === that.XzImage.length) {
							that.ReleaseGo_MY()
						}
					}
					
				}
			},
			//单选按钮
			radioFawei(item) {
				this.Swtype = item.value
			},
			//立即发布
			ReleaseGo() {
				const that = this
				uni.showModal({
					title: '修改提示',
					content: '确定修改该内容吗?',
					cancelText: "取消",
					confirmText: "确定",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
								that.uploadOss()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			},
			ReleaseGo_MY() {
				if (this.Bjlist[0].type === 1 || this.Bjlist[0].type === 2) {
					console.log(this.Swname + " " + this.Swgoods + " " + this.SwText + " " + this.Swtype + " " + this
						.Swphone + " " + this.SwImage)
					uni.$showMsg("修改成功！")
					setTimeout(function() {
						uni.redirectTo({
							url: 'My_dynamic'
						})
					}, 1500)

				} else if (this.Bjlist[0].type === 3) {
					console.log(this.XzText + " " + this.Xzprice + " " + this.Xztype + " " + this.Xzphone + " " + this
						.Xzwx + " " + this.XzImage)
					uni.$showMsg("修改成功！")
					setTimeout(function() {
						uni.redirectTo({
							url: 'My_dynamic'
						})
					}, 1500)
				}
			},
			// 获取经纬度
			GetLocation() {
				const that = this
				uni.getLocation({
					type: 'gcj02',
					//sHighAccuracy:true,
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						console.log('当前位置：' + res);

						that.GetNowCityInfo(res) //获取城市信息
					}
				});
			},
			// 获取当前城市信息
			GetNowCityInfo(lag) {
				const that = this
				let qqmapsdk = new QQMapWX({
					key: 'EETBZ-J2SH2-MURUX-CSGRT-CCRSS-NYBGN' //腾讯地图 - 申请开发者密钥（key）
				});
				qqmapsdk.reverseGeocoder({
					location: {
						longitude: lag.longitude,
						latitude: lag.latitude
					},
					success(res) {
						console.log('当前位置信息', res)
						that.infaddress = res.result.formatted_addresses.recommend
						if (res.status == 0 && res.message == "query ok") {
							let city = res.result.address_component.city;
						}
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.Release {
		height: 200rpx;
	}

	.Release1 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 218rpx;
		height: 208rpx;
		display: flex;
		background-color: #ffffff;
		top: 20rpx;
		left: 20rpx;
		border-radius: 15px;
		//box-shadow: 5px 10px 10px #51d3d3;

	}

	.Release2 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 218rpx;
		height: 208rpx;
		width: 140rpx;
		height: 140rpx;
		left: 36rpx;
	}

	.Release3 {
		position: absolute;
		align-self: center;
		padding: 2px 2px 2px 2px;
		box-sizing: border-box;
		top: 150rpx;
		left: 30rpx;
		font-size: 15px;
		color: rgb(153, 153, 153);
		text-align: center;
		width: 160rpx;

	}

	.aaa {
		box-shadow: 5px 10px 10px #51d3d3;
	}

	.Release4 {
		font-size: 18px;
		color: #51d3d3;
		border-bottom: 3px solid #51d3d3;
		font-family: cursive;
		font-weight: 900;

	}

	.Release5 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 218rpx;
		height: 208rpx;
		display: flex;
		background-color: #ffffff;
		top: 20rpx;
		left: 20rpx;
		border-radius: 15px;
		//box-shadow: 5px 10px 10px #51d3d3;
		margin-left: 240rpx;
	}

	.Release6 {
		border-width: 0px;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 218rpx;
		height: 208rpx;
		display: flex;
		background-color: #ffffff;
		top: 20rpx;
		left: 20rpx;
		border-radius: 15px;
		//box-shadow: 5px 10px 10px #51d3d3;
		margin-left: 480rpx;
	}

	//取件时间样式
	.Run_5 {
		position: relative;
		left: 34rpx;
		top: 50rpx;
		width: 688rpx;
		height: 132rpx;
		background-image: none;
		border: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-radius: 15px;
		background-color: #ffffff;
		box-shadow: 5px 10px 10px #51d3d3;

	}

	.Run_5_1 {
		border-width: 0px;
		position: absolute;
		left: 36rpx;
		top: 45rpx;
		width: 600rpx;
		height: 38rpx;
		display: flex;
		font-family: '微软雅黑';
		font-weight: bold;
		font-style: normal;
	}

	.abe {
		position: absolute;
		left: 580rpx;
		top: 200rpx;
		font-size: 12px;
	}

	.Reaade1 {
		position: absolute;
		top: 80rpx;
		left: 55rpx;
	}

	.Run_55 {
		position: relative;
		left: 34rpx;
		top: 50rpx;
		width: 688rpx;
		height: 390rpx;
		background-image: none;
		border: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-radius: 15px;
		background-color: #ffffff;
		box-shadow: 5px 10px 10px #51d3d3;

	}

	//按钮
	.uniBt_but {
		border-width: 0px;
		position: absolute;
		left: 25rpx;
		top: 950rpx;
		width: 330rpx;
		height: 70rpx;
		background: inherit;
		background-color: rgba(81, 211, 211, 1);
		border: none;
		border-radius: 14px;
		color: #FFFFFF;
		font-size: 13px;
	}

	.uniBt_but22 {
		box-shadow: 5px 6px 10px #51d3d3;
		border-radius: 100px;
		width: 700rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 15px;
		margin-top: 520rpx;
		margin-left: 0rpx;
	}

	.uniBt_but222 {
		box-shadow: 5px 6px 10px #51d3d3;
		border-radius: 100px;
		width: 700rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 15px;
		margin-top: 350rpx;
		margin-left: 0rpx;
	}

	.Run_fw_labe2 {
		display: flex;
		width: 300rpx;
		padding-top: 40rpx;
		margin-left: 160rpx;
		font-size: 18px;
	}

	.Run_fw_1 {
		position: absolute;
		top: 0px;
		left: 60rpx;
		padding-top: 4rpx;
	}

	//定位
	.down23 {
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		left: 20rpx;
		top: 520rpx
	}

	.maerq1 {
		position: absolute;
		top: 526rpx;
		left: 60rpx;
		font-size: 24rpx;
		color: #C1C0C0;
	}

	.Run_4_4 {
		border-width: 0px;
		position: absolute;
		left: 310px;
		top: 24px;
		width: 22px;
		height: 20px;
		display: flex;
	}
</style>
